<template>
    <Card>
        <Table  row-key="source_channel_id" :indent-size="0" :load-data="handleLoadData" :update-show-children="true"  :columns="columns" :data="data" class="ivu-mt-16" :loading="loading">
            <template slot-scope="{ row }" slot="status">
                <Badge  v-if="row.consume_type == '2'" status="success" text="周期消费"></Badge>
                <Badge v-if="row.consume_type == '1'" status="warning" text="日消费"></Badge>
            </template>
            <template slot-scope="{ row }" slot="operation">
                <a v-hasC="{ name: '-v1-marketing-consume-update-channel-type',flag: '/v1/marketing/consume/update-channel-type',}" @click="handleAllocation(row)" v-if="row.consume_type">编辑</a>
            </template>
        </Table>
        <Modal v-model="modalstatus" title="编辑">
            <span>渠道消费：</span>
            <RadioGroup  v-model="consume_type">
                <Radio :label="1">日消费</Radio>
                <Radio :label="2">周期消费</Radio>
            </RadioGroup>
            <div slot="footer">
                <Button @click="handleCancel()">取消</Button>
                <Button type="primary" :loading="remarksloading" @click="handleSubmit()">确定</Button>
            </div>
        </Modal>
    </Card>
</template>
<script>
    import {
        channeltypeList,
        updatechannelType
    } from '@api/hqapi/networkMarketing.js';
    export default {
        data(){
            return {
                columns: [
                    { title: '一级渠道', key: 'source_name', minWidth: 108 ,tree: true,},
                    { title: '类型', slot: 'status', minWidth: 90 },
                    { title: '操作', slot: 'operation', width: 118 },
                ],
                data: [],
                loading: false,
                modalstatus: false,
                remarksloading: false,
                consume_type: 1,
                id: '',
                allData: {},
                allDatas: {},
            };
        },
        methods: {
            initial(){
                channeltypeList().then(res => {
                    console.log(res,'res');
                    this.data = [];
                    if(res){
                        res.forEach(item => {
                            this.allData[item.source_channel_id] = item.children;
                            this.allDatas[item.source_name] = item.children;
                            if(item.children){
                                this.data.push({
                                    _loading: false,
                                    source_channel_id: item.source_channel_id,
                                    source_name: item.source_name,
                                    consume_type: item.consume_type,
                                    children: [],

                                });
                            }else {
                                this.data.push({
                                    source_channel_id: item.source_channel_id,
                                    source_name: item.source_name,
                                    // status: item.status

                                });
                            }
                        });
                    }
                });
            },
            // 编辑
            handleAllocation(row){
                this.id = row.source_channel_id;
                this.consume_type = row.consume_type * 1;
                this.modalstatus = true;
            },
            handleCancel(){
                this.id = '';
                this.consume_type = 1;
                this.modalstatus = false;
            },
            handleSubmit(){
                const params = {
                    consume_type: this.consume_type,
                    source_channel_id: this.id
                };
                updatechannelType(params).then(res => {
                    this.$Message.success('编辑成功');
                    this.initial();
                    this.handleCancel();
                });
            },
            handleLoadData(item, callback) {
                console.log(item,'item');
                item._loading = true;
                setTimeout(() => {
                    const data = this.allData[item.source_channel_id];
                    console.log(data,'data');
                    callback(data);
                });
            },

        }
    };
</script>